{extend name="../../public/admin"}
{block name="title"}系统日志{/block}
{block name="css"}{/block}
{block name="body"}

    <div id="container">
        <div>
            <form action="" method="post" id="form">
                <input type="hidden" name="index" :value="index">
                <div class="form-group input-group col-xs-3 pull-left col-xs-offset-2">
                    <label class="input-group-addon">{:lang('IP')}</label>
                    <input type="text" class="form-control" name="ip">
                </div>
                <div class="form-group input-group pull-left">&nbsp;&nbsp;</div>
                <div class="form-group input-group col-xs-3 pull-left">
                    <label class="input-group-addon">{:lang('关键字')}</label>
                    <input type="text" class="form-control" name="text">
                </div>
                <div class="form-group input-group pull-left">&nbsp;&nbsp;</div>
                <div class="form-group input-group col-xs-3 pull-left">
                    <a href="javascript:;" class="btn btn-info" @click="qqqq()"><i class=""></i>{:lang('搜索按钮')}</a>
                </div>

            </form>
        </div>
        <div class="clearfix"></div>
        <div style="height: 20px;"></div>
       <div class="table-responsive">
           <table class="table table-bordered table-hover" v-cloak>
               <thead>
               <tr class="active">
                   <th colspan="5">
                       <span class="fa-pull-right">总 <strong>{{count}}</strong> 条</span>
                   </th>
               </tr>
               <tr class="active">
                       <th width="10%">编号</th>
                       <th width="15%">时间</th>
                       <th width="10%">IP</th>
                       <th width="10%">操作人</th>
                       <th width="20%">操作详细</th>
                   </tr>
               </thead>
               <tbody>
                   <template v-for="(key,index) in list">
                       <tr>
                           <td>{{key.riid}}</td>
                           <td>{{key.rinew_time}}</td>
                           <td>{{key.riip}}</td>
                           <td>{{key.adminname}}</td>
                           <td :title="key.ritext">{{(key.ritext).slice(0,10)}}...</td>
                       </tr>
                   </template>
               </tbody>
           </table>
           <div id="Pagination"></div>
       </div>
    </div>
{/block}
{block name="js"}
<link rel="stylesheet" href="__PUBLIC__/public/page/pagination.css">
<script src="__PUBLIC__/public/page/jquery.pagination.js"></script>
<script>
    (()=>{
        const app = new Vue({
            el:'#container',
            data:{
                list:[],
                index:0,//记住第几页,
                count:0
                ,wh:{name:false}//记住旧的刷选条件
            }
        });

        //点击搜索 事件
        app.qqqq = function () {

            app.index = 0;
            app.wh = $('#form').serialize().replace(/\=\w+/,'=0');
            get_data(function (da) {
                app.list = da[0];
                pag(da);
            })
        }
        app.wh = $('#form').serialize();
        //初始化数据
        get_data(function (da) {
            app.wh = $('#form').serialize();
            app.list = da[0];
            /*添加页面按钮*/
            pag(da);
        });
        function pag(da) {
            app.count = da[1];
            $("#Pagination").pagination(da[1],{
                items_per_page:30,
                callback:function (fnindex) {
                    app.index = fnindex;
                    app.wh = app.wh.replace(/\=\w+/,'='+app.index);
                    get_data(function (da) {
                        app.list = da[0];
                    });
                }
            });
        }

        function get_data(fn = 1) {
            $.post(DADMIN+'/system/index',app.wh,function (da) {
                fn(da);
            })
        }








    })();
</script>
{/block}